<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="城市标签" prop="cityName">
        <el-select @change="getList" v-model="queryParams.cityName" placeholder="请选择">
          <el-option v-for="item in cityNameOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" v-show="showSearch" class="mb8" justify="space-between">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['lottery:lottery:add']"
          type="primary"
          icon="Plus"
          @click="handleAdd()"
          >新增</el-button
        >
        <el-button v-hasPermi="['lottery:lottery:setBgc']" @click="handleSetBackground()"
          >设置抽奖背景</el-button
        >
      </el-col>
      <el-button type="primary" v-hasPermi="['lottery:lottery:export']" @click="handleExport()"
        >导出</el-button
      >
    </el-row>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="序号" width="50" type="index" :index="indexAdd" align="center" />
      <el-table-column label="城市标签" align="center" prop="cityName" />
      <el-table-column label="区域名称" align="center" prop="areaName" />
      <el-table-column label="点位" align="center" prop="positionName" />
      <el-table-column label="点位圈" align="center" prop="positionImg">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 50px"
            :src="row.positionImg"
            preview-teleported
            hide-on-click-modal
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[row.positionImg]"
            :initial-index="0"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'info'">{{
            row.status ? '已抽奖' : '待抽奖'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            v-show="row.status"
            link
            type="primary"
            v-hasPermi="['lottery:lottery:reset']"
            @click="handleReset(row)"
          >
            重置
          </el-button>
          <el-button
            link
            type="primary"
            v-hasPermi="['lottery:lottery:edit']"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleDetele(row.id)"
            v-hasPermi="['lottery:lottery:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <setBgcImgDialog ref="setBgcImgDialogRef" />
    <addDialog ref="addDialogRef" :dialogTitle="dialogTitle" @refresh="getList" />
  </div>
</template>
<script setup>
import setBgcImgDialog from './components/setBgcImgDialog.vue'
import addDialog from './components/addDialog.vue'
import { deleteLotteryIdApi, getLotteryListApi, putEditLotteryApi } from '@/api/lottery'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)
const { proxy } = getCurrentInstance()
const setBgcImgDialogRef = ref()
const addDialogRef = ref()
const dialogTitle = ref('新增')
const queryRef = ref()
const showSearch = ref(true)
const loading = ref(false)
const total = ref(0)
const list = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  cityName: cityNameOptions.value[0]
})

/**
 *   页面切换递增
 * @param {*} index
 */
function indexAdd(index) {
  const { pageNum, pageSize } = queryParams.value
  return index + 1 + (pageNum - 1) * pageSize
}
function handleSearch(type) {
  !type && queryRef.value.resetFields()
  getList()
}
/**新增 */
function handleAdd() {
  dialogTitle.value = '新增'
  addDialogRef.value.init('', queryParams.value.cityName)
}
/**设置背景 */
function handleSetBackground() {
  setBgcImgDialogRef.value.init()
}
/**导出 */
function handleExport() {
  proxy.download('/tissue/positionDraw/derive', {}, `抽奖列表数据${new Date().getTime()}.xlsx`)
}
/**查询列表 */
function getList() {
  loading.value = true
  getLotteryListApi(queryParams.value)
    .then((res) => {
      total.value = res.data.total || 0
      list.value = res.data.rows || []
    })
    .finally(() => {
      loading.value = false
    })
}
/**重置 */
function handleReset(item) {
  const itemData = {
    id: item.id,
    areaId: item.areaId,
    positionId: item.positionId,
    positionImg: item.positionImg,
    remarks: item.remarks,
    status: 0,
    cityName: item.cityName
  }
  putEditLotteryApi(itemData).finally(() => getList())
}
/**编辑 */
function handleEdit(item) {
  dialogTitle.value = '编辑'
  const itemData = {
    id: item.id,
    areaId: item.areaId,
    positionId: item.positionId,
    positionImg: item.positionImg,
    remarks: item.remarks,
    status: item.status,
    cityName: item.cityName
  }
  addDialogRef.value.init(itemData)
}
/**删除 */
function handleDetele(id) {
  deleteLotteryIdApi(id).finally(() => getList())
}

getList()
</script>
<style lang="scss" scoped></style>
